<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { getSearchList } from "../../apis/music";
import { createWindow, ipcRendererSend } from "../../utils/ipcRenderer";
import { formatTime } from "../../utils/tool";

const route = useRoute();
const albumList = ref([]);
const count = ref();
const loading = ref(false);
const currentPage = ref(1);
const getInit = async (page) => {
  loading.value = true;
  let res2 = await getSearchList(
    route.params.keyword,
    20,
    (page - 1) * 24,
    1014
  );
  currentPage.value = page;
  albumList.value = res2.result.videos;
  count.value = res2.result.videoCount;
  loading.value = false;
};
getInit(1);

const handleVideo = (item) => {
  if (item.type == 0) {
    createWindow({
      windowName: "videoDetail",
      path: "videoDetail",
      width: 1360,
      height: 820,
      param: { id: item.vid },
    });
  } else {
    createWindow({
      windowName: "videos",
      path: "videos",
      width: 1360,
      height: 820,
      param: { id: item.vid },
    });
  }
  ipcRendererSend("windows-param", {
    emit: "playVideo",
    targetName: "home",
  });
};
</script>
<template>
  <div v-loading="loading" class="singer_album">
    <el-scrollbar heigt="100%">
      <div class="title">搜索 视频 "{{ route.params.keyword }}"</div>
      <div class="video_wrap">
        <div class="item_wrap" v-for="(item, index) in albumList" :key="index">
          <div class="item">
            <div @click="handleVideo(item)" class="cover">
              <el-image
                lazy
                :src="item.coverUrl + `${'?param=300y300'}`"
                fit="cover"
              ></el-image>
              <span class="count"
                ><span class="iconfont el-icon-caret-right"></span>
                {{
                  item.playTime > 10000
                    ? Math.floor(item.playTime / 10000) + "万"
                    : item.playTime
                }}</span
              >
              <span class="time">{{ formatTime(item.durationms) }}</span>
            </div>
            <div class="title1">{{ item.title }}</div>
            <div class="name">{{ item.creator[0].userName }}</div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="Math.ceil(count / 24) * 10"
          :pager-count="7"
          @current-change="getInit"
          :current-page.sync="currentPage"
        >
        </el-pagination>
      </div>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.singer_album {
  height: 100%;

  .title {
    font-size: 30px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 40px;
    font-weight: 600;
  }
  .video_wrap {
    display: grid;
    justify-content: space-around;
    grid-template-columns: repeat(auto-fill, 16vw);

    .item_wrap {
      //   width: 11.25rem;
      .item {
        margin-bottom: 30px;
        .cover {
          position: relative;
          height: 13vh;
          overflow: hidden;
          border-radius: 13px;
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 13px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
              0 0 6px rgba(0, 0, 0, 0.04);
          }
          .count {
            position: absolute;
            font-size: 8px;
            z-index: 5;
            top: 2%;
            right: 2%;
            color: #fff;
          }
          .el-icon-caret-right {
            font-size: 15px;
          }
          .time {
            position: absolute;
            font-size: 8px;
            z-index: 5;
            bottom: 2%;
            right: 2%;
            color: #fff;
          }
        }
        .title1 {
          font-size: 15px;
          font-weight: 600;
          line-height: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .name {
          font-size: 10px;
          color: #6e6e69;
        }
      }
    }
  }
}
</style>
